<template>
  <div class="all">
    <!-- 标题栏 -->
    <div class="title">
      <div class="titleName">
        <div class="titlename1" @click="toPromote">推荐</div>
        <div class="titlename3" @click="follow" style="color:#00ffff">
          关注
        </div>
        <div class="titlename2" @click="toMY">我的</div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div style="color:#fff;font-size:16px">
      <!-- 账户：{{
        newAccount(
          this.$store.state.accountdataspromote[this.$store.state.id]
            .acc_nick_name
        )
      }} -->
    </div>
    <!-- 推送消息显示 -->
    <div class="titleBox">
      <div class="titleMessage">推送消息</div>
      <el-button class="lookAll" type="text" @click="showAllMessage()"
        >查看全部</el-button
      >
    </div>
    <div class="messageBox" v-if="isReloadData">
      <div v-for="(item, index) in push_message" :key="index">
        <span
          v-if="
            index > push_message.length - 4 && index < push_message.length - 1
          "
          style="color:#FFF;font-size:16px;margin-left:10px"
          >{{ item }}</span
        >
        <span
          v-if="index === push_message.length - 1"
          style="color:red;font-size:16px;margin-left:10px"
          >{{ item }}</span
        >
      </div>
    </div>
    <el-dialog title="推送消息" :visible.sync="dialogVisible" width="90%">
      <div class="block">
        <div class="cTime">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择开始时间"
            style="width:140px"
            size="small"
          >
          </el-date-picker>
          <span>-</span>
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="选择截止时间"
            style="width:140px"
            size="small"
          >
          </el-date-picker>
        </div>
        <el-button
          size="mini"
          @click="sure"
          type="primary"
          icon="el-icon-search"
          style="margin-left:200px;margin-top:10px;margin-bottom:10px"
          >点击这里查询</el-button
        >
      </div>

      <div v-if="showMessage">
        <div
          v-for="(item, index) in push_message.slice(
            push_message.length - 10,
            push_message.length
          )"
          :key="index"
        >
          <span style="font-size:16px;">{{ item }}</span>
        </div>
      </div>
      <div v-if="!showMessage">
        <div v-for="(item, index) in push_message" :key="index">
          <span
            style="font-size:16px;"
            v-show="
              new Date(item.substring(0, 16).replace(/-/g, '/')) >=
                new Date(start.replace(/-/g, '/')) &&
                new Date(item.substring(0, 16).replace(/-/g, '/')) <=
                  new Date(end.replace(/-/g, '/'))
            "
            >{{ item }}</span
          >
        </div>
      </div>
    </el-dialog>
    <div class="navigation">
      <div class="menu1" @click="menu1()">
        <span :style="{ color: color1 }">收益率</span>
      </div>
      <div class="menu2" @click="menu2()">
        <span :style="{ color: color2 }">交易记录</span>
      </div>
    </div>
    <el-divider content-position="left" v-if="this.active === 2">.</el-divider>
    <el-divider content-position="right" v-else-if="this.active === 1"
      >.</el-divider
    >
    <router-view></router-view>
  </div>
</template>
<script>
import { Dialog } from 'vant'
import { socketsend } from '../assets/js/websocketTest.js'
export default {
  data() {
    return {
      activeIndex: '1',
      color1: '#00FFFF',
      color2: '#FFFFFF',
      color3: '#FFFFFF',
      show: true,
      active: 2,
      value1: '',
      value2: '',
      start: '2000-08-08',
      end: '2099-08-06',
      // 通过v-if实现局部div的刷新
      isReloadData: true,
      dialogVisible: false,
      showMessage: true
    }
  },
  computed: {
    push_message() {
      return this.$store.state.pushFollowMessage
    }
  },
  mounted() {
    this.$store.state.routerPath = this.$route.path
    this.$store.state.pushFollowMessage = []
    this.$store.state.message = []
    this.screenMessage()
  },
  methods: {
    // 刷新按钮
    Socketsend() {
      console.log(111)
      socketsend()
    },
    newAccount(x) {
      var pattern3 = new RegExp('[0-9]+')
      if (pattern3.test(x)) {
        var newphone = x.substr(0, 3) + '******' + x.substr(x.length - 2)
        return newphone
      } else {
        return x
      }
    },
    // 通过v-if实现局部div的刷新
    reload() {
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },
    sure() {
      this.showMessage = !this.showMessage
      this.start = this.fmtDate(this.value1)
      this.end = this.fmtDate(this.value2)
      console.log(this.start, this.end)
    },
    fmtDate(obj) {
      obj = typeof obj === 'number' ? obj : Number(obj)
      var date = new Date(obj)
      var y = 1900 + date.getYear()
      var m = '0' + (date.getMonth() + 1)
      var d = '0' + date.getDate()
      var h = '0' + date.getHours()
      var min = '0' + date.getMinutes()
      // var s = '0' + date.getSeconds()
      return (
        y +
        '-' +
        m.substring(m.length - 2, m.length) +
        '-' +
        d.substring(d.length - 2, d.length) +
        ' ' +
        h.substring(h.length - 2, h.length) +
        ':' +
        min.substring(min.length - 2, min.length)
      )
    },
    // 通过v-if实现局部div的刷新
    menu1() {
      this.show = true
      this.color1 = '#00FFFF'
      this.color2 = '#FFFFFF'
      this.active = 2
      console.log(this.$store.state.INDEX)
      this.$router.push('/networth')
    },
    menu2() {
      if (Math.max(this.$store.state.productId) < 3001) {
        Dialog.confirm({
          message: '未开通该功能，请联系057182310420开通'
        })
      } else {
        this.color1 = '#ffffff'
        this.color2 = '#00FFFF'
        this.show = false
        this.active = 1
        this.$router.push('/followtrans')
      }
    },
    follow() {
      this.$router.push('/follow')
      console.log(1)
    },
    toMY() {
      this.$router.push('/mobliedata3')
    },
    toPromote() {
      this.$router.push('/promote')
    },
    showAllMessage() {
      if (Math.max(this.$store.state.productId) < 3001) {
        Dialog.confirm({
          message: '未开通该功能，请联系057182310420开通'
        })
      } else {
        this.value1 = ''
        this.value2 = ''
        this.showMessage = true
        this.$store.state.pushFollowMessage = []
        this.dialogVisible = true
        this.time = Date.parse(new Date()) / 1000
        console.log(this.time)
        this.sortData = this.$store.state.transactiondatas.sort(function(a, b) {
          var x = parseInt(a.transaction.open_order.executed_time)
          var y = parseInt(b.transaction.open_order.executed_time)
          return x > y ? -1 : x > y ? 1 : 0
        })
        console.log(this.sortData)
        for (let i = 0; i < this.sortData.length; i++) {
          this.time1 = this.fmtDate(
            this.sortData[i].transaction.open_order.order_time * 1000
          )
          console.log(this.sortData[i].transaction.open_order.order_time)
          this.num1 = this.sortData[i].transaction.open_order.order_volume
          this.record1 =
            // this.newAccount(
            //   this.$store.state.accountdataspromote[this.$store.state.id]
            //     .acc_nick_name
            // ) +
            this.time1 +
            '  ' +
            this.sortData[i].transaction.symbol +
            ' 委托 买' +
            this.num1 +
            '股'

          this.time2 = this.fmtDate(
            this.sortData[i].transaction.open_order.executed_time * 1000
          )
          this.num2 = this.sortData[i].transaction.open_order.executed_volume
          this.record2 =
            // this.newAccount(
            //   this.$store.state.accountdataspromote[this.$store.state.id]
            //     .acc_nick_name
            // ) +
            this.time2 +
            '  ' +
            this.sortData[i].transaction.symbol +
            ' 开仓 买' +
            this.num2 +
            '股'

          this.time3 = this.fmtDate(
            this.sortData[i].transaction.close_order.executed_time * 1000
          )
          this.num3 = this.sortData[i].transaction.close_order.executed_volume
          this.record3 =
            // this.newAccount(
            //   this.$store.state.accountdataspromote[this.$store.state.id]
            //     .acc_nick_name
            // ) +
            this.time3 +
            '  ' +
            this.sortData[i].transaction.symbol +
            ' 平仓 卖' +
            this.num3 +
            '股'
          this.$store.state.pushFollowMessage.push(this.record1)
          if (this.num2 === '0') {
            console.log('没有买入')
          } else {
            this.$store.state.pushFollowMessage.push(this.record2)
          }
          this.$store.state.pushFollowMessage1.push(this.record1)
          this.$store.state.pushFollowMessage2.push(this.record2)
          if (this.num3 === '0') {
            console.log('没有卖出')
          } else {
            this.$store.state.pushFollowMessage3.push(this.record3)
            this.$store.state.pushFollowMessage.push(this.record3)
          }
        }
        this.$store.state.pushFollowMessage.sort(function(a, b) {
          var x = new Date(a.substring(0, 16).replace(/-/g, '/'))
          var y = new Date(b.substring(0, 16).replace(/-/g, '/'))
          return x < y ? -1 : x < y ? 1 : 0
        })
        console.log(this.$store.state.pushFollowMessage)
      }
    },
    screenMessage() {
      for (let i = 0; i < this.$store.state.pushFollowMessage.length; i++) {
        if (
          this.$store.state.pushFollowMessage[i].slice[(0, 12)] ===
          this.$store.state.accountdataspromote[this.$store.state.id].account
        ) {
          this.$store.state.message.push(this.$store.state.pushFollowMessage[i])
        }
      }
    }
  }
}
</script>
<style Lang="less" scoped>
.all {
  width: 375px;
  min-height: 100vh;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  background: #010017;
}
.el-divider {
  background: #999999 !important;
}
.el-divider__text.is-left {
  left: 75px;
  width: 1px;
  height: 5px;
  background: #00ffff;
  border-radius: 3px;
}
.el-divider__text.is-right {
  right: 75px;
  width: 1px;
  height: 5px;
  background: #00ffff;
  border-radius: 3px;
}
.title {
  display: flex;
  flex-direction: row;
  color: #ffffff;
  width: 375px;
}
.search {
  margin-left: 78px;
}
.titlename1,
.titlename2,
.titlename3 {
  flex: 1;
  margin: 10px;
}
span {
  font-size: 16px;
}
.titleName {
  display: flex;
  flex-direction: row;
  margin-left: 100px;
}
.titleBox {
  display: flex;
}
.titleMessage {
  color: #fff;
  font-size: 20px;
}
.messageBox {
  height: 70px;
  background: #1f1e32;
  display: flex;
  flex-direction: column;
}
.lookAll {
  padding: 0;
  margin-left: 30px;
}
img {
  width: 345.5px;
  height: 73px;
  margin: 10px 15px 10px 15px;
}
.navigation {
  width: 375px;
  display: flex;
}
.menu1,
.menu2,
.menu3 {
  flex: 1;
  text-align: center;
  margin: 10px;
}
/* 文字滚动动画 */
/* .scroll {
  position: relative;
  width: 375px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}
.scroll span {
  display: inline-block; //inline样式不能使用动画
  animation: scroll 8s linear infinite;
}
.scroll span:after {
  position: absolute;
  left: 100%;
  content: attr(data-text);
  margin-left: 8em;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 8em)); //总长再加上margin-left
  }
} */
</style>
